<%--
  Created by IntelliJ IDEA.
  User: 86156
  Date: 2023/8/28
  Time: 2:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>货物管理</title>
    <!-- 引入layui的css样式 -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 查询表单；查询 新增按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input id="input1" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">生产厂家</label>
            <div class="layui-input-inline layui-input-wrap">
                <input id="input2" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询" class="layui-btn"/>
            <input id="addBtn" type="button" value="新增" class="layui-btn"/>
        </div>
    </div>
</form>

<!-- 查询 表格 -->
<table id="pTable"></table>


<!-- 引入layui的js文件-->
<script src="/layui/layui.js"></script>

<!-- 新增 弹出窗口的模板 -->
<script id="template1" type="text/html"><!--中间放的代码的数据类型-->
<form class="layui-form" action="" lay-filter="form1">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-inline">
                <select id="category" name="categoryId"></select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <!-- 放置一个隐藏框 name="id" 可以被赋值
                新增的时候id没有值 编辑的时候id有值 -->
                <input type="hidden" name="id">
                <input type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">生产厂家</label>
            <div class="layui-input-inline">
                <input type="text" name="manufacturer" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">型号</label>
            <div class="layui-input-inline">
                <input type="text" name="model" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">规格</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="specification" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
        <div class="layui-inline">
            <input id="resetBtn" type="button" value="重置" class="layui-btn"
                   style="background-color: white;color: black;border: 1px black"/>
            <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
        </div>
    </div>
</form>
</script>

<!-- 表格操作模板 被每一条数据反复使用 -->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
</script>

<script>
    //告诉浏览器加载layui框架中的哪些组件
    //加载完小组件就执行function
    layui.use(['table', 'layer', 'form'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var table = layui.table;//操作表格
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var $ = layui.jquery;//从layui中把jquery拿出来用

        //给查询按钮绑定事件
        //当它被点击的时候，才执行：
        $("#searchBtn").on("click", function () {
            //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中

            //通过table(方法名)组件渲染表格，大括号内写参数
            table.render({
                //JSON格式引入数据：一个大括号是一个对象，大括号内属性格式:"值",
                //指定渲染哪个表格（通过id找元素 写#）
                elem: "#pTable",
                //指定需要发哪个请求去要数据
                url: "/product?cmd=select",
                //表头
                cols: [[
                    {title: "ID", field: "id"},
                    {title: "商品名称", field: "name"},
                    {title: "商品类别", field: "categoryName"},
                    {title: "生产厂家", field: "manufacturer"},
                    {title: "型号", field: "model"},
                    {title: "规格", field: "specification"},
                    {title: "操作", templet: "#template2"}
                ]],
                //模糊查询 两个框 有值&没有值
                where: {name: $("#input1").val(), manufacturer: $("#input2").val()},
                page: true,//开启分页（默认false）
                limits: [5, 10, 20],//下拉框选择每页条数
                limit: 5//每页条数 默认选中
            });
            //查出来后，删除条件框里的内容
            //使用id选择器获取文本框里的内容
            var input1 = document.getElementById("input1");
            var input2 = document.getElementById("input2");
            //设置文本框的内容为空
            input1.value = "";
            input2.value = "";
        });

        //给新增按钮绑定事件
        $("#addBtn").on("click", function () {
            //发请求要分类数据
            $.get("/category?cmd=all", function (categories) {
                //弹出窗口
                layer.open({
                    title: "新增商品",
                    type: 1,
                    area: ['400px', '400px'],
                    content: $("#template1").html()//通过id找到script标签，获取标签中的代码
                });

                //把option放到分类下拉框里
                $.each(categories, function (index, item) {
                    $("#category").append("<option value='" + item.id + "'>" + item.name + "</option>");
                })
                //再渲染下拉框
                form.render();

                //给保存按钮绑定事件
                //注：只有等到点击完新增按钮并弹出窗口，保存按钮在界面上出现时，才能找到
                $("#saveBtn").on("click", function () {
                    //不提交form表单
                    //1.使用.val方法获取表单中的数据，找一个变量装一下
                    var data = form.val("form1");//使用表单中的lay-filter属性来定位表单
                    //2.派一个人去发请求，把上边取出来的数据带上(Ajax)
                    //给data添加成员变量cmd 并赋值
                    data.cmd = "save"
                    //post请求不在url上传
                    //第一个参数：请求地址；
                    //第二个参数：请求时传的参数
                    //第三个参数：请求成功之后做什么；这个方法只有200成功时才执行
                    $.post("/product", data, function () {
                        //关窗口
                        layer.closeAll();
                        //给成功提示
                        layer.msg("保存成功");
                        //再查一遍表格的数据（点一下查询按钮）
                        $("#searchBtn").click();
                    });
                });
            });
        });

        //给表格操作（编辑/删除）绑事件
        table.on("tool", function (obj) {
            //定位行和列
            var event = obj.event;//obj内记录自定义的event值，用以区分不同操作
            var data = obj.data;//data表示该行所有数据  用以区别行

            //说明点了编辑 点击编辑和点击新增弹窗一样
            if (event === "edit") {
                //先去后台获取当前商品的所有数据，取成功了，带着数据再弹窗
                //get请求在url上传，第一个参数（请求地址和cmd，id）直接写，第二个参数（请求参数）可以不写，第三个参数（请求成功后做什么）
                $.get("/category?cmd=all", function (categories) {
                    $.get("/product?cmd=selectById&id=" + data.id, function (product) {//function()内 给传回的json格式数据命名，方便在下面引用
                        //1.弹出窗口
                        layer.open({
                            title: "编辑商品",
                            type: 1,
                            area: ['400px', '400px'],
                            content: $("#template1").html()
                        });

                        //把option放到分类下拉框里
                        $.each(categories, function (index, item) {
                            $("#category").append("<option value='" + item.id + "'>" + item.name + "</option>");
                        })
                        //再渲染下拉框
                        form.render();

                        //2.把查到的product对象放进form表单中
                        //第一个参数：定位form表单；第二个参数：给form表单赋值
                        form.val("form1", product);

                        //3.保存按钮
                        $("#saveBtn").on("click", function () {
                            //1.把表单中的数据都取出来
                            var data = form.val("form1");
                            //2.派一个人去发请求，把上面取出来的数据带过去（Ajax）
                            data.cmd = "save";
                            $.post("/product", data, function () {
                                layer.closeAll();
                                layer.msg("保存成功");
                                $("#searchBtn").click();
                            });
                        });
                    });
                });


            }
            //说明点了删除
            if (event === "delete") {
                //弹窗确认框 点击确认执行第二个函数，点击取消执行第三个函数
                layer.confirm("确认删除？", function () {
                    //第二个函数 点击确认 Ajax发请求
                    //post方法不在url上传，不能直接写cmd
                    //传3个参数 ("请求地址",{请求参数（cmd,以什么为依据删除）},删除成功之后做什么)
                    $.post("/product", {cmd: "delete", id: data.id}, function () {
                        layer.closeAll();
                        layer.msg("删除成功");
                        $("#searchBtn").click();
                    })
                    //第三个函数 点击取消 自动关窗口
                }, function () {
                });
            }
        });
    });
</script>
</body>
</html>
